<template>
  <div class="bigbox">
    <div class="box">
      <div class="left">
        <div class="header">
          <h3>会员信息</h3>
          <table class="b1">
            <tr>
              <td>会员卡号：{{detailsData[0].totalorderAccountnumber}}</td>
              <td>卡金金额：￥123</td>
            </tr>
            <tr>
              <td>会员姓名：{{detailsData[0].totalorderCustomer}}</td>
              <td>赠金余额：￥321</td>
            </tr>
            <tr>
              <td>会员等级：黄金会员</td>
              <td>会员积分：{{detailsData[0].totalorderIntegral}}</td>
            </tr>
          </table>
        </div>
        <div class="foot">
          <h3>订单明细</h3>
          <table class="b1">
            <tr>
              <td>订单号：{{detailsData[0].totalorderNumber}}</td>
              <td>服务人数：{{detailsData[0].totalorderNumService}}</td>
            </tr>
            <tr>
              <td>开台时间：{{detailsData[0].totalorderStarttime}}</td>
              <td>房间号:{{detailsData[0].totalorderRoomNum}}</td>
            </tr>
          </table>
          <!-- UI 表格 -->
          <div class="b3">
            <el-table :data="detailsData[0].nfuhOrderList" stripe style="width: 100%">
              <el-table-column prop="orderServicenum" label="订单号" width="80">
              </el-table-column>
              <el-table-column prop="orderServicetype" label="项目名称" width="80">
              </el-table-column>
              <el-table-column prop="orderNumber" label="数量" width="80">
              </el-table-column>
              <el-table-column prop="orderPrice" label="单价" width="80">
              </el-table-column>
              <el-table-column prop="" label="折扣" width="80">
              </el-table-column>
              <el-table-column prop="orderPrice" label="小计" width="80">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div class="right">
        <h3>抵扣信息</h3>
        <div class="rBox">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="消费券" color="#5EA2FF">
              <el-select v-model="form.region" placeholder="">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="积分使用">
              <el-input v-model="form.name" placeholder="请输入抵消积分" style="width: 222px">
              </el-input>
            </el-form-item>
            <el-form-item label="优惠方案" color="#5EA2FF">
              <el-select v-model="form.fangan" placeholder="">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="抹零">
              <el-input
                v-model="form.money"
                placeholder="请输入抹零金额"
                style="width: 222px"
              ></el-input>
            </el-form-item>
          </el-form>
          <div class="rFoot">
            <p>优惠卷折扣：<span>-$0.00</span></p>
            <p>积分折扣：<span>0.00</span></p>
            <p>优惠金额：<span>-$0.00</span></p>
            <h2>应收合计：<span style="color: red">{{detailsData[0].totalorderPrice}}</span></h2>
          </div>
          <div class="button">
            <el-button type="primary" @click="pay()">立即结算</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState } = createNamespacedHelpers("order");
export default {
  data() {
    return {
      userData: [
        {
          num: "OD123",
          name: "王小虎",
          address: "1",
        },
        {
          num: "OD123",
          name: "王小虎",
          address: "1",
        },
      ],
      form: {
        region: "不使用",
        name: "",
        fangan: "不使用",
        money: "0.10",
      },
    };
  },
  computed: {
    ...mapState(["detailsData"]),
  },
  methods:{
    pay(){
      this.$router.push('jiesuan')
    }
  }
};
</script>

<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
}
.bigbox {
  background-color: #eff2f6;
  width: 1024px;
  height: 700px;
  margin: 0 auto;
  margin-bottom: 5px;
  .box {
    display: flex;
    flex-wrap: nowrap;
    width: 1000px;
    // height: 700px;
    margin: 0 auto;
    justify-content: space-between;
    .header {
      width: 550px;
      background-color: white;
      border-radius: 5px;
      margin-top: 10px;
      margin-left: 20px;
      .b1 {
        width: 500px;
        margin: 0 auto;
        // display: flex;
        // border: 1px solid red;
        td {
          width: 500px;
          // text-align: center;
          // margin-left: 50px;
          &:nth-of-type(2) {
            padding-left: 180px;
          }
        }
      }
    }
    .foot {
      width: 550px;
      background-color: white;
      border-radius: 5px;
      margin-top: 10px;
      margin-left: 20px;
      .b1 {
        width: 500px;
        margin: 0 auto;
        // display: flex;
        // border: 1px solid red;
        td {
          width: 500px;
          // text-align: center;
          // margin-left: 50px;
          &:nth-of-type(2) {
            padding-left: 180px;
          }
        }
      }
      .b3 {
        margin-top: 10px;
        margin: 0 auto;
        margin-left: 20px;
        .el-table {
          margin: 0 auto;
        }
      }
    }
    .right {
      width: 400px;
      // height: 700px;
      margin-top: 10px;
      background-color: white;
      border-radius: 5px;
      margin-right: 20px;
      .rBox {
        .el-form-item {
          color: #5ea2ff;
        }
        .rFoot {
          text-align: right;
          padding-right: 20px;
        }

        .button {
          margin: 0 auto;
          width: 300px;
          .el-button {
            margin-top: 20px;
            width: 300px;
            height: 40px;
          }
        }
      }
    }
  }
}
</style>

